import React,{useContext, useEffect, useState} from "react";
import VoteMain from "./VoteMain";
import VoteFooter from "./VoteFooter";
import ThemeContext from "../ThemeContext";
export default function Vote() {
    const {store} = useContext(ThemeContext);
    //获取容器中的公共状态
    let {supNum,oppNum} = store.getState().vote;
    //组件第一次渲染完毕后，把让组件更新的方法，放在store的事件池中
    /* let [num,setNum] = useState(0);
    const update = ()=>{
        setNum(num+1);
    }
    useEffect(()=>{
        // let unsubscribe =store.subscribe(让组件更新的方法)
        //  + 把让组件更新的方法放在store的事件池中
        //  + 返回的unsubscribe 方法执行，可以把刚才放入事件池中的方法移除
        let unsubscribe = store.subscribe(update);
        //在上一次组件释放的时候，把上一次放在事件池中的方法移除掉！每一次更新都把最新的update放入到事件池中，保证update的上级上下文是最新的闭包[num是最新的状态信息]
        return ()=>{
            unsubscribe()
        }
    },[num]) */
    //也可以不用像上面那么麻烦，还是只在第一次渲染完往事件池中加入一个方法即可！必须保证这个方法执行，修改的状态值，和之前的状态值不一样！！
    //  + 你也可以把状态修改为事件戳
    //  + 也可以修改为随机数
    let [_,setNum] = useState(0);
    useEffect(()=>{
        store.subscribe(()=>{
            setNum(Math.random())
        })
    },[])
    return <div className="vote-box">
        <div className="header" style={{
            display:'flex'
        }}>
            <h2 className="title">React是很棒的前端框架</h2>
            <span className="num" style={{
                display:'block',
                lineHeight:'72px',
                marginLeft:'50px'
            }}>{supNum + oppNum}</span>
        </div>
        <VoteMain/>
        <VoteFooter/>
    </div>
}
